Tính năng mới trong web

Rachel Andrew

Ngày phát hành: 20/5/2025

Tại Google I/O 2025, bài phát biểu chính về tính năng mới trên web đã chia sẻ tất cả thông báo về Baseline, cùng với việc chỉ xem một số tính năng đã trở thành một phần của Baseline trong năm nay. Đây là một năm tuyệt vời đối với web và đối với Baseline, bài đăng này là bản tóm tắt mọi nội dung được đề cập, cùng với tất cả đường liên kết để tìm hiểu thêm.

Trang tổng quan về nền tảng web và các tính năng web

Vào năm 2024, chúng tôi đã công bố lần ra mắt đầu tiên của Trang tổng quan về nền tảng web. Trang tổng quan này sử dụng tập dữ liệu tính năng web, cho phép bạn khám phá tất cả tính năng trong Baseline.

Dữ liệu tính năng web hiện đã hoàn chỉnh, với tất cả các tính năng của nền tảng được liên kết. Khi các tính năng mới tham gia Điểm chuẩn mỗi tháng, dữ liệu sẽ được cập nhật và tất cả dữ liệu này sẽ xuất hiện trên trang tổng quan.

Các công cụ giúp bạn khám phá mục tiêu Cơ sở

Mặc dù có thể dựa vào mục tiêu di chuyển của Điểm chuẩn phổ biến rộng rãi để xây dựng chính sách hỗ trợ trình duyệt (như công ty Clearleft ở Vương quốc Anh), nhưng bạn cũng có thể áp dụng mục tiêu cố định dựa trên năm Điểm chuẩn. Giờ đây, bạn có thể sử dụng dữ liệu người dùng của riêng mình cùng với dữ liệu tính năng web để xác định mục tiêu phù hợp nhất với bạn.

Năm ngoái tại I/O, chúng tôi đã thông báo rằng RUMvision sẽ triển khai Baseline vào sản phẩm của họ và tính năng tích hợp này hiện đã hoạt động.

Vì sử dụng dữ liệu RUM của bạn, nên công cụ này giúp bạn xác định năm Cơ sở để áp dụng dựa trên dữ liệu đó thay vì mức trung bình trên toàn cầu. Điều này cũng có thể giúp bạn biết liệu bạn có nên sử dụng tính năng Điểm chuẩn có sẵn rộng rãi hay không.

Bạn cũng có thể sử dụng dữ liệu Google Analytics để xem rõ tỷ lệ phần trăm người dùng hỗ trợ từng mục tiêu Cơ sở ban đầu bằng Công cụ kiểm tra cơ sở ban đầu của Google Analytics mới.

Đây chỉ là hai trong số nhiều công cụ đang phát triển giúp bạn liên kết dữ liệu người dùng thực với Đường cơ sở.

Gần đây, Nhóm cộng đồng Web DX đã ra mắt một tiện ích cho Netlify. Tiện ích này hỗ trợ nhiều năm Điểm chuẩn và có sẵn trên các trang web của bạn để giúp bạn quyết định mục tiêu trong các công cụ xây dựng. Chúng tôi sẽ sớm tích hợp với sản phẩm RUM của Observatory của Cloudflare và Contentsquare.

Tích hợp dữ liệu với các công cụ của riêng bạn

Dữ liệu về tính năng web là dữ liệu mở và có sẵn cho các công cụ tích hợp của riêng bạn. Chúng tôi đang cố gắng giúp bạn làm việc đó dễ dàng hơn.

Sử dụng API Trang tổng quan nền tảng web hoặc sử dụng trực tiếp dữ liệu tính năng web từ gói npm.

Giờ đây, bạn có thể liên kết các phiên bản trình duyệt với một mục tiêu Cơ sở bằng cách sử dụng mô-đun baseline-browser-mapping của Nhóm cộng đồng WebDX của W3C. Bạn có thể sử dụng mô-đun này trong môi trường JavaScript phía máy chủ hoặc bằng cách tải các tệp JSON hoặc CSV được làm mới hằng ngày từ kho lưu trữ xuống.

Dữ liệu này không chỉ bao gồm các mối liên kết cho nhóm trình duyệt Cơ sở, mà còn cho các trình duyệt hạ nguồn như Samsung Internet, Opera, UC Browser và Android Webview.

Tìm hiểu xem mục tiêu Cơ sở có hỗ trợ các tính năng hay không

Thông tin cơ sở hiện có trên hầu hết các trang MDN và Can I Use, bạn cũng có thể tìm thấy thông tin này trên Trang tổng quan về nền tảng web, cũng như trên các bài viết trên web.dev và CSS Tricks. Tuy nhiên, bạn cần phải tìm kiếm thông tin hỗ trợ. Sẽ hữu ích hơn nhiều khi thông tin Cơ sở được hiển thị trong IDE khi bạn lập trình và trong tất cả các công cụ khác mà bạn sử dụng.

Chúng tôi rất vui mừng được chia sẻ với bạn rằng nhiều công cụ chính hiện đã tích hợp sẵn tính năng hỗ trợ Baseline hoặc dễ dàng tích hợp.

browserslist-config-baseline

Nhiều công cụ như Babel và PostCSS sử dụng danh sách trình duyệt để xác định trình duyệt nào sẽ hỗ trợ.

Cùng với WebDX CG và các thành viên trong cộng đồng, nhóm Chrome đã giúp phát hành một công cụ mới có tên là browserslist-config-baseline. Điều này cho phép bạn định cấu hình các mục tiêu danh sách trình duyệt theo các thuật ngữ Cơ sở như phổ biến hoặc Năm cơ sở.

Nhờ đó, mọi công cụ lấy mục tiêu danh sách trình duyệt đều có thể được biểu thị bằng Đường cơ sở.

Tìm hiểu thêm trong bài viết Sử dụng Baseline với browserslist.

Đường cơ sở trong công cụ tìm lỗi mã nguồn – ESLint và Stylelint

Gần đây, bạn có thể sử dụng công cụ tìm lỗi mã nguồn Baseline với một số công cụ mới trong không gian công cụ tìm lỗi mã nguồn, bắt đầu bằng ESLint cho CSS.

ESLint cơ sở có quy tắc use-baseline. Bạn có thể đặt giá trị này thành mục tiêu Chuẩn gốc mà bạn muốn và hệ thống sẽ cảnh báo bạn khi bạn sử dụng bất kỳ tính năng nào mới hơn mục tiêu của bạn. Bạn có thể chọn cách giải quyết các cảnh báo đó: bằng cách thay thế tính năng đó bằng các tính năng gốc hoặc bằng cách chặn cảnh báo trình tìm lỗi mã nguồn. Đây là giải pháp hoàn toàn hợp lệ khi bạn biết mình đang sử dụng một tính năng tiên tiến một cách an toàn, chẳng hạn như nếu đó là một tính năng cải tiến dần dần.

Theo mặc định, ESLint sẽ không cảnh báo nếu các tính năng mới hơn được sử dụng trong các khối @supports, vì các trình duyệt không được hỗ trợ sẽ không đánh giá các tính năng đó.

Đối với nhu cầu tìm lỗi mã nguồn HTML, bạn cũng có thể sử dụng trình bổ trợ cộng đồng có tên html-eslint.

Stylelint chính thức hỗ trợ một trình bổ trợ có tên là stylelint-plugin-use-baseline. Quy tắc này hoạt động giống như quy tắc ESLint cho CSS, nhưng chạy trên Stylelint.

Nhiều trình tìm lỗi mã nguồn cũng có trình bổ trợ IDE, vì vậy, bạn có thể nhận được phản hồi tức thì về trạng thái Đường cơ sở trong khi lập trình thông qua các đường gạch dưới ngoằn ngoèo.

Đường cơ sở trong VS Code và JetBrains WebStorm

Nhiều IDE từ lâu đã hỗ trợ cách di chuột qua một tính năng trong trình chỉnh sửa và xem danh sách các phiên bản trình duyệt được hỗ trợ.

Tuy nhiên, có thể rất khó để biết liệu tính năng đó có thực sự an toàn để sử dụng hay không. Bạn cần phải phân tích xem danh sách đó có thiếu trình duyệt lớn nào không và phiên bản trình duyệt đó mới đến mức nào.

Để khắc phục vấn đề đó, chúng tôi đã hợp tác với IDE phổ biến nhất mà hàng triệu nhà phát triển web sử dụng, đó là VS Code, để tích hợp trực tiếp dữ liệu cơ sở vào các thẻ di chuột này.

Giờ đây, bạn có thể di chuột qua một tính năng và tính năng đó sẽ cho bạn biết liệu tính năng đó có được coi là Đường cơ sở hay không và trong bao lâu, hoặc liệu có trình duyệt lớn nào chưa triển khai đầy đủ tính năng đó hay không.

Các tính năng được hỗ trợ bao gồm thuộc tính CSS, phần tử HTML và thuộc tính HTML. Tìm hiểu thêm trong bài viết Visual Studio Code hiện hỗ trợ Đường cơ sở.

Việc tích hợp này có nghĩa là mọi IDE dựa trên VS Code cũng sẽ được hưởng lợi từ các thẻ di chuột này.

Ngoài ra, chúng tôi cũng có thể thông báo rằng JetBrains đang triển khai thẻ di chuột vào IDE JavaScript và TypeScript WebStorm.

Web đang cải thiện nhanh hơn bao giờ hết

Chúng tôi hy vọng rằng Baseline sẽ giúp bạn tận dụng thực tế là web có khả năng tương tác đang cải thiện nhanh hơn bao giờ hết.

Bạn có thể sử dụng Trang tổng quan về nền tảng web để xem tất cả các tính năng đã trở thành Điểm chuẩn mới trong 12 tháng qua, kể từ Google I/O 2024.

Ngoài ra, bạn có thể yên tâm rằng một số tính năng sẽ sớm có trong Baseline New vì chúng nằm trong dự án Interop 2025. Bạn có thể đọc về tất cả tính năng có trong bài viết Interop2025: một năm cải tiến nền tảng web khác.

Chế độ viết ngang

Chúng ta đã thấy một tính năng trở thành Mới có trong Đường cơ sở, đó là các giá trị sideways-rl và sideways-lr cho thuộc tính writing-mode của CSS. Nếu bạn đang sử dụng chế độ ghi dọc chỉ cho mục đích bố cục, thì các giá trị theo chiều ngang có thể là những giá trị cần đạt được.

h1 {
  writing-mode: sideways-rl;
}

h2 {
  writing-mode: sideways-lr;
}

Vị trí neo

Vị trí neo được phát hành trong Chrome 125. Phương thức này giúp bạn liên kết vị trí của một phần tử với một neo, chẳng hạn như khi mở chú giải công cụ bằng một nút.

Hiện tại, tính năng này đã có trong Interop 2025, vì vậy, chúng ta sẽ thấy tính năng này tham gia Baseline trong năm nay.

Các chỉ số quan trọng chính của trang web: LCP và INP

LCP API

API Thời gian xảy ra sự kiện (dành cho INP)

Các chỉ số quan trọng về trang web có thể giúp bạn đánh giá trải nghiệm trên trang web của mình và xác định các cơ hội cải thiện. Sáng kiến Web Vitals nhằm đơn giản hoá tình hình và giúp các trang web tập trung vào những chỉ số quan trọng nhất, đó là Các chỉ số quan trọng về trang web.

Interop 2025 bao gồm các chỉ số Thời gian hiển thị nội dung lớn nhất (LCP) và Lượt tương tác đến nội dung hiển thị tiếp theo (INP) bằng cách triển khai API LargestContentfulPaint và API Thời gian sự kiện trên các trình duyệt.

Các tính năng nâng cao cho phần tử <details>

Bản thân phần tử <details> đã có sẵn trong Đường cơ sở phổ biến. Tính năng này được đưa vào Interop 2025 vì có một số tính năng giúp tiện ích thông tin công bố bằng <details> trở nên hữu ích hơn.

Phần tử <details> chứa phần tử <summary> là phần hiển thị trên trang khi phần tử <details> bị thu gọn. Bên ngoài <summary> là nội dung của phần tử <details>, phần tử này bị ẩn cho đến khi người dùng nhấp vào bản tóm tắt.

Một trong những việc đang được thực hiện để có thể tương tác trong Interop 2025 là ẩn nội dung bằng content-visibility thay vì display, nghĩa là nếu không được mở rộng, nội dung sẽ không được hiển thị.

Phần tử giả lập ::marker cũng là một phần của công việc Interop 2025. Phần tử giả lập ::marker cho phép bạn tạo kiểu cho tam giác hiển thị của phần tử <summary>.

summary::marker {
  content: "+ ";
  font-family: monospace;
  color: red;
  font-weight: bold;
}

Sau đó, một phần tử giả lập khác – ::details-content.

::details-content đại diện cho nội dung – một phần của phần tử chi tiết mở rộng và thu gọn, đồng thời cho phép bạn tạo kiểu cho phần tử đó.

[open]::details-content {
  border: 5px dashed hotpink;
}

Ngoài ra, còn có một số điểm cải tiến thú vị như tự động mở rộng phần tử <details> bằng các kết quả trùng khớp tìm thấy trong trang và chuyển giá trị until-found của thuộc tính hidden HTML sang Mới có trong đường cơ sở. Thao tác này sẽ ẩn một phần tử cho đến khi phần tử đó được tìm thấy bằng tính năng tìm kiếm trong trang của trình duyệt hoặc được chuyển đến trực tiếp bằng cách theo dõi một mảnh URL.

CSS @scope

Quy tắc @scope CSS cho phép bạn giới hạn phạm vi tiếp cận của bộ chọn. Bằng cách đặt gốc phạm vi bằng @scope, mọi quy tắc kiểu được lồng bên trong quy tắc at chỉ áp dụng cho cây DOM đó.

Ví dụ: nếu bạn chỉ muốn nhắm đến các phần tử <img> bên trong một phần tử có lớp .card, thì .card sẽ trở thành gốc phạm vi.

@scope (.card) {
    img {
        border-color: green;
    }
}

Tìm hiểu thêm trong bài viết Giới hạn phạm vi của bộ chọn bằng quy tắc @scope CSS.

scrollend

Một tính năng khác giúp giảm độ phức tạp và cải thiện giao diện cuộn là scrollend. Nếu không có sự kiện scrollend, sẽ không có cách nào đáng tin cậy để phát hiện một thao tác cuộn đã hoàn tất.

// before scrollend
document.onscroll = event => {
  clearTimeout(window.scrollEndTimer)
  window.scrollEndTimer = setTimeout(callback, 100)
}

Với sự kiện scrollend, trình duyệt sẽ thực hiện tất cả các bước đánh giá khó khăn này cho bạn.

document.onscrollend = event => {…}

Xem thêm ví dụ trong Scrollend, một sự kiện JavaScript mới.

Chuyển đổi chế độ xem trong cùng một tài liệu

Cuối cùng nhưng không kém phần quan trọng, hiệu ứng chuyển đổi khung hiển thị là một phần của Interop 2025. Công việc này liên quan đến các hiệu ứng chuyển đổi chế độ xem cùng một tài liệu, vì vậy, các hiệu ứng chuyển đổi này cũng áp dụng cho các lớp chuyển đổi chế độ xem và ứng dụng một trang.

Hãy theo dõi trang tổng quan về Interop 2025 để xem dự án đang phát triển như thế nào trong năm nay.

Các tính năng có trong Interop 2025 sẽ không phải là những tính năng duy nhất trở thành một phần của Baseline trong năm nay, nhưng việc đưa các tính năng này vào các dự án cho chúng ta thấy một dấu hiệu khá tốt rằng các tính năng này được ưu tiên và sắp ra mắt.

Chúng tôi vừa mới bắt đầu

Đây là một năm thú vị đối với Baseline và chúng tôi đã đi được một chặng đường dài kể từ thông báo vào năm ngoái. Hiện tại, chúng ta đã hoàn tất việc điền lại dữ liệu tính năng web. Điều này đã mở ra cơ hội và cho phép tạo các công cụ cho nhà phát triển. Chúng tôi mới chỉ bắt đầu ở đây và nếu bạn có một sản phẩm hoặc công cụ nguồn mở sẽ được hưởng lợi khi đưa dữ liệu này vào, chúng tôi rất mong nhận được ý kiến phản hồi của bạn.

Hãy theo dõi web.dev vì chúng tôi sẽ tiếp tục phát hành thông báo về các công cụ mới cùng với hướng dẫn để giúp bạn tận dụng mọi thứ mà web mang lại.